<%@page import="com.fasterxml.jackson.annotation.JsonInclude.Include"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <script type="text/javascript" src="${ctx}/js/lib.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.SuperSlide.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.scrollLoading.js"></script>
    
    <script type="text/javascript" src="${ctx}/res/js/modules.js"></script>
    <link rel="stylesheet" href="${ctx }/res/hplus/js/plugins/layer/skin/layer.css">
	<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
	<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});  
          $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
		  $(".scrollLoading2 img").lazyload({effect: "fadeIn"});
      });
      $(document).ready(function () {
       setNav(3);
    });
    </script>
    <title>软装到家</title>
    <style type="text/css">
    	.layui-layer-content{color:black}
    	select,input{font-family:Microsoft YaHei}
		.text{ width:480px; height:38px;border:#ccc solid 1px; padding:0 2%; margin:0 0 20px 0; color:#888; font-size:14px;}
		.button{ width:100%; background:#ed145b; border:none; overflow:hidden; cursor:pointer; font-size:18px; color:#fff; text-align:center; height:40px; line-height:40px; margin:20px 0 0px;}
		.select{ width:160px;border:#ccc solid 1px; height:40px; margin:0px 0; float:left; font-size:14px; margin-right:10px}
		.select1{ width:160px;border:#ccc solid 1px; height:40px; margin:0px 0; float:left; font-size:14px;}
    </style>
</head>
<body>
 <%@include file="../common_head.jsp" %>
 <%@include file="../common_nav.jsp" %>
<div class="w-1200 margin-0-auto">
	<div class="ogmall_programme_show">
    	<h1>${design.title }</h1>
        <div class="t1"><img src="${design.headImage }"></div>
        <div class="t2">户型图：</div>
        <div class="t3"><img src="${design.communityHouseType.image }"></div>
        <div class="t4">
        	位置：${design.community.city.name } ${design.community.district.name }<br>面积：${design.area } ㎡<br>户型：${design.houseType.name }<br>详细：${design.details }<br>报价：<b>${design.price }</b>元
        </div>
        <div class="t5">
        	<a href="${ctx }/designer/detail?designerId=${design.designer.id}" target="_blank">
	        	<div class="l"><h2>${design.designer.user.realName }</h2>从业${design.designer.workAge }年</div>
	            <div class="r"><img src="${design.user.headImage}"></div>
            </a>
            <div class="blank10"></div><div class="blank10"></div>
            <a href="#" class="btn_programme" onclick="orderDesigner(${design.designer.id});">预约设计</a>
        </div>
        <div class="blank10"></div>
        <div class="title">
        	<span>方案详情</span>
        	<c:if test="${not empty design.view3dURL }">
        	<a href="${design.view3dURL }" target="_blank">
        	<span style="margin-left: 10px;">3D</span>
        	</a>
        	</c:if>
        </div>
        <div class="blank10"></div>
        <div class="tab_show scrollLoading1">
            <!-- <div class="hd">
                <ul><li>默认</li><li>价格</li><li>热度</li></ul>                        
            </div>  -->
            <div class="bd">
                <div>
                	<div class="pic">
                		${design.content }
                	<!-- <img data-original="img/14.jpg"> --></div>
                    <div class="blank10"></div>
                    <!-- <div class="tit">产品说明：</div>
                    <div class="txt">
                    	拥有强大的供应链体系和严格的选材标准机制，所选用材以环保健康为基础标准，精选国内外一线品牌。采用集采模式，拿到最低供货价格，C2M工厂直供消费者，省去中间经销商环节；业主可享受更大的价格优惠和品质保证。<br>
      IDI室内设计信息化系统 通过国家863科技计划立项初审（立项名：智慧城市、动态构建、实时呈现）；该系统将设计系统按工业设计的思路将设计标准化、信息化、规模化；实时构建、动态呈现、自动预算、远程协同，完美的解决了传统家装中仅仅提供平面示意图，装修材料无法精确预算，造价不确定，装修效果无法得到保障等问题。
                    </div> -->
                	<div class="tit">商品清单：</div>
                    <ul class="goods">
                    	<c:forEach items="${designProducts }" var="designProduct">
                    		<li>
	                        	<div class="img"><img src="${designProduct.product.headImage }"></div>
	                            <div class="tl"><h3>${designProduct.product.name }</h3><p>数量：${designProduct.count }<br>型号：${designProduct.specification.spec1 }</p></div>
	                            <div class="tr"><h3>￥${designProduct.specification.realPrice}</h3><a href="${ctx }/product/detail?id=${designProduct.product.id}" target="_blank">查看</a></div>
                       	    </li>
                    	</c:forEach>
                    </ul>
                </div>
                <!-- <div>价格</div>
                <div>热度</div> -->
            </div>
        </div>
    </div>
    <div class="blank10"></div>
    <div class="ogmall_recommend">
    	<div class="title">推荐方案</div>
        <div class="picLoop scrollLoading2">
            <a class="sPrev"></a>
            <div class="bd">
                <ul>
                	<c:forEach items="${designs}" var="d">
                		<li>
                			<a href="${ctx }/design/detailNew?id=${d.id}">
		                        <div class="img"><img data-original="${d.headImage}"></div>
		                      </a>
		                      <a href="${ctx }/designer/detail?designerId=${d.designer.id}" target="_blank">
		                        <div class="b">
		                            <img src="${d.user.headImage }">
		                            <span>${d.user.realName }<em>${d.community.city.name } ${d.community.district.name }  ${d.area }㎡</em></span>
		                        </div>
	                        </a>
                   		 </li>
                	</c:forEach>
                </ul>
            </div>
            <a class="sNext"></a>
        </div>
    </div> 
</div>
<div id="designOrder_div" style="display: none">
<div id="order_div">
	<form>
		<input type="hidden" name="designerId" value="${designerId }" />
		<input type="text" value="姓名" name="name" onfocus="if(value=='姓名') {value=''}" onblur="if (value=='') {value='姓名'}" class="text" id="name">
		<input type="text" value="手机号" name="mobile" onfocus="if(value=='手机号') {value=''}" onblur="if (value=='') {value='手机号'}" class="text" id="moblie">
		<select name="provinceId" id="provinceId" class="select provinceId" onchange="changeCity()">
		 	<option value="">省份</option>
             <c:forEach items="${provinces }" var="p">
             <option value="${p.id }">${p.name }</option>
             </c:forEach>
		</select>
		<select name="cityId" id="cityId" class="select cityId" onchange="changeCommunity()">
		 	<option value="">城市</option>
		</select>
		<select name="communityId" id="communityId" class="select1 communityId">
			<option value="">楼盘</option>
		</select>
		<input name="" type="button" class="button" onclick="return doOrder(this);" value="一键预约" id="btn">
	</form>
</div>
</div>
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>

<%@include file="../foot.jsp" %>
<script type="text/javascript" src="${ctx}/js/plugins.js"></script>
<script type="text/javascript" src="${ctx}/js/modules.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<script type="text/javascript">
	jQuery(".tab_show").slide({triggerEvent:true,trigger:"click"});
	jQuery(".picLoop").slide({ mainCell:".bd ul",effect:"leftLoop",vis:3,autoPlay:"true",prevCell:".sPrev",nextCell:".sNext",triggerEvent:true});
	
	function changeCity(){
	 $('.provinceId').each(function(){
	 	var provinceId=$(this).val();
	 	$.ajax({
    		url: "${ctx}/province/findArea",
    		data: {
    			provinceId: provinceId
    		},
    		dataType: "json",
    		success: function(data) {
    			 $('.cityId').each(function(){
		    			$(this).html('');
		    			$(this).append('<option value="">城市</option>');
						for (var i = 0; i < data.length; i++) {
							var obj = data[i];
							var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
							$(this).append(option);	
						}
    			 });
    		}
    		
    	});
	 });		
}

function changeCommunity(){
	$('.cityId').each(function(){
	 	var cityId=$(this).val();
	 	if(cityId!=null&&cityId!=""){
	 		$.ajax({
    		url: "${ctx}/design/findCommunityByCity",
    		data: {
    			cityId: cityId
    		},
    		dataType: "json",
    		success: function(data) {
    			 $('.communityId').each(function(){
		    			$(this).html('');
		    			$(this).append('<option value="">楼盘</option>');
						for (var i = 0; i < data.length; i++) {
							var obj = data[i];
							var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
							$(this).append(option);	
						}
    			 });
    		}
    		
    	});
	 	}
	 });		
}
</script>
</body>
</html>